<template>
  <div>

    <el-container style="height: 100%">
      <el-header><common-header></common-header></el-header>
      <el-container>
        <el-aside width="auto"><common-aside></common-aside></el-aside>
        <el-container>
          <el-main><router-view></router-view></el-main><!--组件插槽，用来匹配插入路由配置的页面-->
        </el-container>
      </el-container>
      <el-footer><common-footer></common-footer></el-footer>
    </el-container>
    <router-link class="to-home" to="/home">
    <el-button icon="el-icon-s-home" class="Home" circle></el-button>
  </router-link>
    <div class="to-top">
    <el-button icon="el-icon-arrow-up" class="top" @click="toTop" circle></el-button>
  </div>
  </div>
</template>

<script>
import CommonHeader from "../src/components/CommonHeader";
import CommonAside from "../src/components/CommonAside";
import CommonFooter from "../src/components/CommonFooter";

export default {
  name: "vueMain",
  components: {
    CommonHeader,
    CommonAside,
    CommonFooter,
  },
  data() {
    return {};
  },
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    },
  },
};
</script>

<style lang="less" scoped>
.to-top {
  height: auto;
}
.top {
    position: fixed;
    bottom: 90px;
    right: 50px;
    background-color: hsl(227, 31%, 58%);
    color: #fff;
  }
.to-home {
  height: auto;
}
.Home {
    position: fixed;
    bottom: 45px;
    right: 50px;
    background-color: hsl(227, 31%, 58%);
    color: #fff;
  }

.el-header,.el-footer {
  background-color: hsl(227, 31%, 65%);
  color: rgb(22, 1, 47);
  text-align: center;
  padding: 0;
}
.el-footer {
  height: 245px !important;
}
.el-aside {
  color: hsl(227, 31%, 65%);
  height: auto;
  background-color: #fff;
}

.el-main {
  background-color: hsl(240, 2%, 91%);
  color: #333;
  text-align: center;
  overflow: hidden;
  min-height: 80vh;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
}
</style>
